<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员中心</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="__CSS__/amazeui.min.css"/>
    <link rel="stylesheet" href="__CSS__/style.css"/>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/amazeui.min.js"></script>
</head>

<body>
<style type="text/css">
    body {
        background-color:#f7f8f8;
    }
    .navCir {
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 999;
        background: #fff;
    }
    .navCir li {
        width: 25%;
        padding: 5px;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        float: left;
        text-align: center;
        font-size: 14px;
    }
    .navCir li.active a {
        color: #F03726;
    }
    a:link, a:visited, a:hover {
        text-decoration: none;
        outline: none;
    }
    li {
        list-style: none;
    }
    .navCir li i {
        font-size: 18px;
    }
    .gray-panel {
        margin-bottom:50px;
    }
    .zjq-border-img {
        border-bottom: 2px !important;
        -moz-border-image: url(/Public/Home/imgs/addre_border.png) 0 0 2 0 stretch;
        -webkit-border-image: url(/Public/Home/imgs/addre_border.png) 0 0 2 0 stretch;
        -o-border-image: url(/Public/Home/imgs/addre_border.png) 0 0 2 0 stretch;
        border-image: url(/Public/Home/imgs/addre_border.png) 0 0 2 0 stretch;
    }
    .zjq-arrow{
        display: -webkit-flex; /* Safari */
        display: flex;
        justify-content: center;
        align-items:center;
    }
    .zjq-arrow i {
        display:block;
        font-size:20px;
    }
    .zjq-arrow .am-u-sm-4 {
        padding-right: 0px;
    }
    .zjq-arrow .am-u-sm-8 {
        padding-left:0px;
    }
    .zjq-content-box {
        margin-bottom:50px;
    }
    .zjq-gray-panel {
        margin-bottom: 0px;
    }
    .checkout-h2 {
        border-bottom: 0 !important;
    }
    .my-pay-ul {
        margin-top:0 !important;
    }
    .h2-left {
        margin-left:10px;
    }
    .product-box {
        border-bottom: 1px solid #DADADA;
    }

    .product-li {
        display: flex;
        align-items: center;
        padding:10px;
        background-color: white;
    }

    .product-li h6,.product-li p{
        margin:0 !important;
    }

    .product-li-left {
        float:left;
        width:30%;
        padding:2px;
    }
    .product-li-left img {
        padding:10px;
        width:100%;
    }
    .product-li-right {
        float:left;
        width:70%;
    }
    .product-li-right p{
        color:#8f8f8f;
        font-size: 12px;
    }
    .cart_foot {
        padding-right:12px;
    }
    .p-color {
        color:#f57737;
    }

    .checkout-h2 {
        margin-top: 0 !important;
    }

    .address-box {
        position:relative;
    }

    .address-box-left {
        width:90%;
        float:left;
    }

    .address-first-td {
        width:35%;
    }

    .select-btn {
        display: inline-block;
        position: absolute;
        right: 10px;
        color: #CCC8C8;
        top: 50%;
        margin-top: -8px;
    }

</style>
<div class="container zjq-content-box">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a onclick="goback()" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">提交订单</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <form method="post" action="{:U('Customization/produce_order')}" id="orderform">
        <div class="gray-panel zjq-gray-panel">

            <h2 class="checkout-h2 h2-left"><span class="am-badge am-round am-badge-warning ">1</span> 确认订单信息</h2>
            <div class="product-box">
                <div class="product-li am-cf">
                    <input type="hidden" name="idskuidnum" value="{$info['id']}###{$skuid}###{$count}">
                    <div class="product-li-left">
                        <img src="{:getImgUrl($img,120)}">
                    </div>
                    <div class="product-li-right">
                        <h6>{$info.name}</h6>
                        <p>价格：<span class="p-color">￥{$price.price}</span>×{$count}</p>
                        <p>规格：{$sku_desc}</p>
                    </div>
                </div>
                <div>
                    <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed" />
                    <div class="cart_foot am-text-right">共<span class="red2 bold" id="total_good">{$count}</span>件商品；总价：<span class="red2 bold" id="total_amount">{$price.totalprice}</span>元；总积分：<span class="red2 bold" id="total_jifen">{$jifen}</span></div>
                </div>

            </div>

            <div class="my-search-title-panel am-text-sm am-margin-bottom-sm"><i class="am-icon-lightbulb-o am-text-danger"></i> 提示：因为收货地址的区域不同送货的时间会有差异 请多多谅解</div>
            <div class="paoduct-title-panel zjq-border-img">
                <input type="hidden" name="pids" value="{$pid}" />
                <input type="hidden" name="skuid" value="{$skuid}" />
                <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">2</span> 确认收货地址</h2>
                <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed" />
                <div class="address-box am-cf ">
                    <div class="address-box-left">
                        <table>
                            <if  condition ="$addrecount gt 0 ">
                                <tr>
                                    <td class="address-first-td">收&nbsp;&nbsp;货&nbsp;&nbsp;人：</td><td>{$contactname}</td>
                                </tr>
                                <tr>
                                    <td class="address-first-td">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</td><td>{$mobile}</td>
                                </tr>
                                <tr>
                                    <td class="address-first-td">收货地址：</td><td>{$province}{$city}{$area}{$detailinfo}</td>
                                </tr>
                                <input type="hidden" id="addressid"  name='addressid' value="{$addressid}">
                                <else />
                                <tr>
                                    <td class="address-first-td">收&nbsp;&nbsp;货&nbsp;&nbsp;人：</td><td></td>
                                </tr>
                                <tr>
                                    <td class="address-first-td">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</td><td></td>
                                </tr>
                                <tr>
                                    <td class="address-first-td">收货地址：</td><td></td>
                                </tr>
                            </if>
                        </table>
                    </div>

                    <if  condition ="$addrecount gt 0 ">
                        <a class="select-btn" href="{:U('Address/select_address_suit')}"><i class="am-icon-chevron-right"></i></a>
                        <else />
                        <a class="select-btn" href="{:U('Address/add_addre')}"><i class="am-icon-chevron-right"></i></a>
                    </if>

                </div>


            </div>
            <div class="paoduct-title-panel">
                <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">3</span>留言备注</h2>
                <div class="am-form-group">
                    <textarea class="am-radius" rows="3" style="width:100%" id="doc-ta-1" name="note"></textarea>
                </div>
            </div>
            <div class="paoduct-title-panel">
                <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">3</span> 支付方式</h2>
                <ul class="am-list am-text-sm my-pay-ul">
                    <li><a href="javascript:;" rel="3"><span class="am-fr"><input type="checkbox" style="zoom: 130%;" name="chuzhi" value="{$suit_money}">&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="__IMG__/money.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;定金支付 &nbsp;&nbsp; <samll class="my-pay-yue">定金余额：<span class="red2">{$suit_money}</span>  &nbsp;&nbsp;</samll></a></li>
                    <li><a href="javascript:;" rel="1" class="hover"><span class="am-fr"><input type="checkbox" name="wx" style="zoom: 130%;">&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="__IMG__/wechat.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;微信支付</a></li>
                </ul>
                <script>
                    $(document).ready(function(e) {
                        $(".my-pay-ul li > a").click(function(){
                            $(".my-pay-ul li > a").removeClass('hover');
                            $(".my-pay-ul li > a i").removeClass('am-icon-check-circle').addClass('am-icon-circle-thin');
                            $(this).addClass('hover');
                            var val = $(this).attr('rel');
                            $("#paytype").val(val);
                            $(this).find('i').removeClass('am-icon-circle-thin').addClass('am-icon-check-circle');

                        });
                    });
                </script>
                <div>
                    <ul class="am-avg-sm-2 am-text-center">
                        <center><li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-danger am-btn-block am-radius" onclick="validate()">提交订单</button></li></center>
                    </ul>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        function validate(){
            var addressid = $("[name='addressid']").val();
            var totall = 0;
            var flag = true;
            $(":checked").each(function(){
                if($(this).attr('name') == 'wx'){
                    flag = false;
                }
                totall = totall+parseInt($(this).val());
            });


            if(flag){
                var total_amount = $('#total_amount').text();

                if(total_amount > totall){

                    $('#my-alert').find('.am-modal-bd').text('您选择的支付方式不足以支付');
                    $('#my-alert').modal();
                }else{
                    $('#orderform').submit();
                }

            }else{
                if(addressid == ''){
                    $('#my-alert').find('.am-modal-bd').text('请选择地址');
                    $('#my-alert').modal();
                }else{
                    $('#orderform').submit();
                }
            }

        }


        function goback(){
            window.history.go(-1);
        }
    </script>

    <!--模态弹窗-->
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">系统提示</div>
            <div class="am-modal-bd">
                请选择地址
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>

    <!--底部-->
    <div class="navCir">
        <li class="active"><a href="{:U('Index/index')}"><i class="am-icon-home "></i>首页</a></li>
        <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
        <li><a href="{:U('ShoppingCart/index')}"><i class="am-icon-shopping-cart"></i>购物车</a></li>
        <li><a href="{:U('UserCenter/index')}"><i class="am-icon-user"></i>我的</a></li>
    </div>
</div>
</body>
</html>
